<template>
    <div class="video-v1-container">
        <video
        v-if="src != ''"

        :id="videoId"
       
        :src="src"
        :autoplay="autoplay"
        :controls="controls"
        :loop="loop"
        :muted="muted"
        :poster="poster"

        @playing="playing" >
        </video>

        <div v-else class="novideo">
            <div class="novideo_title">
                暂无视频
            </div>
        </div>
    </div>
</template>
<script>
import { v4 as uuidv4 } from 'uuid';
// import flvjs from "flv.js"

export default {
    name:"videoPlayer",
    data(){
        
        return{
            videoId:undefined,
                
        }
    },
    created(){


    },
    props:{
        src:{
            type:String,
            default:""
        },
        type:{
            type:String,
            default:""
        },
        // 自动播放
        autoplay:{
            type:Boolean,
            default:true,
        },
        // 控制
        controls:{
            type:Boolean,
            default:true,
        },
        // 循环播放
        loop:{
            type:Boolean,
            default:false
        },
        // 静音
        muted:{
            type:Boolean,
            default:true
        },
        // 封面海报
        poster:{
            type:String,
            default:""
        },
    },
    watch:{
        src:{
            handler(val,old)
            {
                if(val)
                {
                    this.videoId = uuidv4()

                    if(this.autoplay)
                    this.$nextTick(() => {
                        this.playing("true")
                    })  
                }
            },
            deep:true,
            immediate:true
        }

    },
    methods:{
        playing(operation){

            let {src,type,videoId} = this
            let suffix = type == "" ? src.split(".")[src.split(".").length-1] : type
            let video = document.getElementById(videoId);

            console.log(`start play video ${src}`)

            if(suffix == undefined || suffix == "")
            return console.log("播放失败类型无法识别")

            switch (suffix)
            {
                case "mp4" :
                    if(video.play != undefined)
                        video.play();
                    break;
                case "m3u8" :
                    if("true" == operation)
                        this.hlsHandler(video)
                    break;
                case "flv" :
                    if("true" == operation)
                        this.flvHandler(video)
                    break;
            }

          
        },
        hlsHandler(video){
            if (Hls.isSupported()) {

                var hls = new Hls();
                hls.loadSource(this.src);
                hls.attachMedia(video);
                hls.on(Hls.Events.MANIFEST_PARSED, function () {
                    video.play();
                });
                hls.on(Hls.Events.ERROR, function (event, data) {
                    switch (data.type) {
                        case Hls.ErrorTypes.NETWORK_ERROR:
                            console.log("HLS NETWORK ERROR--his流地址填写不正确");
                            break;
                        case Hls.ErrorTypes.MEDIA_ERROR:
                            console.log("HLS MEDIA ERROR--播放器错误");
                            break;
                        default:
                            console.log("HLS OTHER ERROR");
                            break;
                    }
                });
            }
        },
        flvHandler(video){
            if(flvjs.isSupported())
            {
                var flvPlayer = flvjs.createPlayer({
                    type: 'flv',
                    isLive:true,
                    hasAudio:false,
                    url: this.src
                });
                flvPlayer.attachMediaElement(video);
                flvPlayer.load();
                flvPlayer.play();
            }


        }


    },
    beforeDestroy(){

    }
    

}

</script>
<style lang="less">

.video-v1-container{
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;

    video{
        width: 100%;
        height: 100%;
    }
}


</style>